<template>
    <div>
        <form>
            <input type="text" v-model="stu.id">
            <input type="text" v-model="stu.name">
            <input type="text" v-model="stu.age">
            <input type="submit" @click="addStu">
        </form>
        <ul>
        <li v-for="(stu,index) in stus"
            :key="stu.id"
            @click="remStu(index)">
            {{stu.name}}---{{stu.age}}
        </li>
    </ul>
    </div>
</template>

<script>
    export default {
        name: 'App2',
        data: function () {
            return {
                stus: [
                    {id: 1, name: 'zs', age: 10},
                    {id: 2, name: 'ls', age: 20},
                    {id: 3, name: 'ws', age: 30},
                    {id: 4, name: 'qs', age: 40},
                ],
                stu: {
                    id: '',
                    name: '',
                    age: ''
                }
            }
        },
        methods: {
            remStu(index) {
                this.stus = this.stus.filter((stu, idx) => idx != index)
            },
            addStu(e) {
                //表单的默认行为注释掉
                e.preventDefault()
                //copy一份数据出来,
                //拷贝出来的原因::双向绑定,我下面把this.stu数据清空了
                const stu = Object.assign({}, this.stu)
                this.stus.push(this.stu)
                this.stu.id = ''
                this.stu.name = ''
                this.stu.age = ''
                //新增功能1的业务逻辑
            }
        },
        computed: {
            //新增功能1的业务逻辑
        },
        watch: {
            //新增功能1的业务逻辑
        }

    }
</script>

<style>

</style>
